import React, { Component } from 'react'
import {
    AppRegistry,
    StyleSheet,
    Text,
    Button,
    Image,
    View
} from 'react-native'
export default class HomeScreen extends Component {
    render() {
        const { navigate } = this.props.navigation
        return (
            <View style={styles.container}>
                <View>
                    <Image
                        style={styles.topSlideImage}
                        source={require('../../image/home/banner.png')}>
                    </Image>
                </View>
                <View style={styles.row}>
                    <View style={styles.rowCellFixed}>
                        <Text style={styles.cellscrollTitle}>
                            综合统计
                        </Text>
                    </View>
                    <View style={styles.rowCell}>
                        <Text style={styles.cellscrollfont}>
                            单位：288 今日 ↑12 ↓3
                        </Text>
                    </View>
                    <View style={styles.rowCellFixed}>
                        <Text style={styles.cellarrowfont}>
                            >
                        </Text>
                    </View>
                </View>
                <View style={[styles.row, styles.rowSection]}>
                    <View style={styles.rowTitle}>
                        <Text style={styles.cellfont}>
                            管控
                        </Text>
                    </View>
                    <View style={styles.rowContent}>
                        <View style={styles.rowImageOne}>
                            <Image
                                style={styles.rowOptionImage}
                                source={require('../../image/home/zdry.png')}>
                            </Image>
                            <Text
                                style={styles.contentFont}
                                onPress={() => navigate('SignPage')}>
                                跳转登录页
                            </Text>
                        </View>
                        <View style={styles.rowImageTwo}>
                            <Image
                                style={styles.rowOptionImage}
                                source={require('../../image/home/yjxx.png')}>
                            </Image>
                            <Text style={styles.contentFont}>
                                预警信息
                            </Text>
                        </View>
                    </View>
                </View>
                <View style={[styles.row, styles.rowSection]}>
                    <View style={styles.rowTitle}>
                        <Text style={styles.cellfont}>
                            寄递业
                        </Text>
                    </View>
                    <View style={styles.rowContent}>
                        <View style={styles.rowImageOne}>
                            <Image
                                style={styles.rowOptionImage}
                                source={require('../../image/home/ddhy.png')}>
                            </Image>
                            <Text style={styles.contentFont}>
                                订单核验
                            </Text>
                        </View>
                        <View style={styles.rowImageTwo}>
                            <Image
                                style={styles.rowOptionImage}
                                source={require('../../image/home/ljl.png')}>
                            </Image>
                            <Text style={styles.contentFont}>
                                揽件量
                            </Text>
                        </View>
                        <View style={styles.rowImageTwo}>
                            <Image
                                style={styles.rowOptionImage}
                                source={require('../../image/home/tjfx.png')}>
                            </Image>
                            <Text style={styles.contentFont}>
                                统计分析
                            </Text>
                        </View>
                        <View style={styles.rowImageTwo}>
                            <Image
                                style={styles.rowOptionImage}
                                source={require('../../image/home/dwxx.png')}>
                            </Image>
                            <Text style={styles.contentFont}>
                                寄递企业
                            </Text>
                        </View>
                    </View>
                </View>
                <View style={[styles.row, styles.rowSection]}>
                    <View style={styles.rowTitle}>
                        <Text style={styles.cellfont}>
                        散装油
                        </Text>
                    </View>
                    <View style={styles.rowContent}>
                        <View style={styles.rowImageOne}>
                            <Image
                                style={styles.rowOptionImage}
                                source={require('../../image/home/jyds.png')}>
                            </Image>
                            <Text style={styles.contentFont}>
                                加油单数
                            </Text>
                        </View>
                        <View style={styles.rowImageTwo}>
                            <Image
                                style={styles.rowOptionImage}
                                source={require('../../image/home/dwxx.png')}>
                            </Image>
                            <Text style={styles.contentFont}>
                                油企信息
                            </Text>
                        </View>
                    </View>
                </View>
                <View style={[styles.row, styles.rowSection]}>
                    <View style={styles.rowTitle}>
                        <Text style={styles.cellfont}>
                            单位内保
                        </Text>
                    </View>
                    <View style={styles.rowContent}>
                        <View style={styles.rowImageOne}>
                            <Image
                                style={styles.rowOptionImage}
                                source={require('../../image/home/zdry.png')}>
                            </Image>
                            <Text style={styles.contentFont}>
                                重点人员
                            </Text>
                        </View>
                    </View>
                </View>
                <View style={[styles.row, styles.rowSection]}>
                    <View style={styles.rowTitle}>
                        <Text style={styles.cellfont}>
                            金融业
                        </Text>
                    </View>
                    <View style={styles.rowContent}>
                        <View style={styles.rowImageOne}>
                            <Image
                                style={styles.rowOptionImage}
                                source={require('../../image/home/zdry.png')}>
                            </Image>
                            <Text style={styles.contentFont}>
                                重点人员
                            </Text>
                        </View>
                        <View style={styles.rowImageTwo}>
                            <Image
                                style={styles.rowOptionImage}
                                source={require('../../image/home/yjxx.png')}>
                            </Image>
                            <Text style={styles.contentFont}>
                                预警信息
                            </Text>
                        </View>
                        <View style={styles.rowImageTwo}>
                            <Image
                                style={styles.rowOptionImage}
                                source={require('../../image/home/yjxx.png')}>
                            </Image>
                            <Text style={styles.contentFont}>
                                预警信息
                            </Text>
                        </View>
                    </View>
                </View>
                <View style={[styles.row, styles.rowSection]}>
                    <View style={styles.rowTitle}>
                        <Text style={styles.cellfont}>
                            工程项目
                        </Text>
                    </View>
                    <View style={styles.rowContent}>
                        <View style={styles.rowImageOne}>
                            <Image
                                style={styles.rowOptionImage}
                                source={require('../../image/home/zdry.png')}>
                            </Image>
                            <Text style={styles.contentFont}>
                                重点人员
                            </Text>
                        </View>
                        <View style={styles.rowImageTwo}>
                            <Image
                                style={styles.rowOptionImage}
                                source={require('../../image/home/yjxx.png')}>
                            </Image>
                            <Text style={styles.contentFont}>
                                预警信息
                            </Text>
                        </View>
                        <View style={styles.rowImageTwo}>
                            <Image
                                style={styles.rowOptionImage}
                                source={require('../../image/home/yjxx.png')}>
                            </Image>
                            <Text style={styles.contentFont}>
                                预警信息
                            </Text>
                        </View>
                        <View style={styles.rowImageTwo}>
                            <Image
                                style={styles.rowOptionImage}
                                source={require('../../image/home/yjxx.png')}>
                            </Image>
                            <Text style={styles.contentFont}>
                                预警信息
                            </Text>
                        </View>
                    </View>
                </View>
            </View>
        )
    }
}

var styles = StyleSheet.create({
    container: {
        flex:1,
        flexDirection: 'column',
        backgroundColor: '#edeff2'
    },
    topSlideImage: {
        alignSelf: 'center',
        height: 174,
        resizeMode: Image.resizeMode.contain
    },
    row:{
        flexDirection: 'row',
        paddingLeft: 15,
        paddingRight: 15,
        paddingTop: 7,
        paddingBottom: 7,
        backgroundColor: '#fff'
    },
    rowSection:{
        flexDirection: 'column',
        marginTop: 10
    },
    rowCellFixed:{
        flexDirection: 'row',
        justifyContent: 'center'
    },
    rowCell:{
        flex: 1,
        justifyContent: 'center'
    },
    cellscrollTitle:{
        fontSize: 18,
        marginRight: 16,
        fontWeight: '800',
        alignSelf: 'center'
    },
    cellfont:{
        fontSize:16,
        marginRight: 16,
        alignSelf: 'center'
    },
    cellscrollfont:{
        fontSize: 14
    },
    cellarrowfont:{
        fontSize: 18,
        alignSelf: 'center'
    },
    rowTitle:{
        alignSelf: 'flex-start'
    },
    rowContent:{
        flexDirection: 'row',
        justifyContent: 'flex-start',
        paddingTop: 8
    },
    rowImageOne:{
        marginLeft: 23,
        alignItems: 'center'
    },
    rowImageTwo:{
        marginLeft: 32,
        alignItems: 'center'
    },
    rowOptionImage:{
        width: 40,
        height: 40,
        resizeMode: Image.resizeMode.contain
    },
    contentFont:{
        fontSize: 14
    }
})

